import { useEffect, useState } from 'react'
import ArticleList from '../ArticleList'
type Props = {
  curChannelId: string
}

const ArticleListCache: React.FC<Props> = (props) => {
  const { curChannelId } = props
  // 保存已经出现过的频道id
  const [cacheList, setCacheList] = useState<string[]>([])
  // 监听curChannelId的改变
  useEffect(() => {
    if (cacheList.includes(curChannelId) === false) {
      setCacheList([...cacheList, curChannelId])
    }
  }, [curChannelId])

  return (
    <div className="article-list-cache-container" style={{ height: '100%' }}>
      {/* 渲染已经出现过的频道的文章列表，但只有是当前选择的频道才显示 */}
      {cacheList.map((channelId) => (
        <ArticleList
          key={channelId}
          channelId={channelId}
          style={{ display: channelId === curChannelId ? '' : 'none' }}
        ></ArticleList>
      ))}
    </div>
  )
}

export default ArticleListCache
